<template>
  <div>
    <!-- query form -->
    <el-form :model="query" label-position="top">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="订单号:">
            <el-input v-model="query.orderNumber" placeholder="订单号/渠道订单号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="联系人资料:">
            <el-input v-model="query.contacts" placeholder="联系人/联系电话/联系邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单时间:">
            <el-row>
              <el-col :span="11">
                <el-date-picker v-model="query.submitOnFrom" type="date" placeholder="起始时间" />
              </el-col>
              <el-col :span="2" class="text-center">至</el-col>
              <el-col :span="11">
                <el-date-picker v-model="query.submitOnTo" type="date" placeholder="截止时间" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="" class="no-top-label">
            <el-button type="primary" icon="search" @click="loadPage(1)">检索</el-button>
            <!-- <el-button @click="">导出</el-button> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="订单状态:">
            <el-select v-model="query.status" clearable multiple placeholder="选择订单状态">
              <el-option v-for="(value, key) in orderStatusMapper" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分销商:">
            <el-select v-model="query.dtbId" clearable multiple placeholder="选择分销商">
              <el-option v-for="dtb in dtbs" :key="dtb.id" :label="dtb.shortName" :value="dtb.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  
    <!-- data table -->
    <el-table :data="page.content" v-loading.body="loading" v-on:sort-change="sort"
      show-summary :summary-method="summaryTotalCost">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row>
            <el-col :span="8">
              <div class="display-form">
                <div class="display-item">
                  <label>支付时间：</label>
                  <div class="display-content">{{ props.row.payOn ? props.row.payOn : '未支付' }}</div>
                </div>
                <div class="display-item">
                  <label>配送时间：</label>
                  <div class="display-content">{{ props.row.dispatchOn ? props.row.dispatchOn : '未配送' }}</div>
                </div>
                <div class="display-item">
                  <label>产品单价：</label>
                  <div class="display-content">{{ props.row.price*1.0/100 | currency('￥') }}</div>
                </div>
                <div class="display-item">
                  <label>订单总价：</label>
                  <div class="display-content">￥{{ props.row.total*1.0/100 }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="display-form">
                <div class="display-item">
                  <label>联系人：</label>
                  <div class="display-content">{{ props.row.contact.name }}</div>
                </div>
                <div class="display-item">
                  <label>联系电话：</label>
                  <div class="display-content">{{ props.row.contact.phone }}</div>
                </div>
                <div class="display-item">
                  <label>联系邮箱：</label>
                  <div class="display-content">{{ props.row.contact.email }}</div>
                </div>
                <div class="display-item">
                  <label>备注：</label>
                  <div class="display-content">{{ props.row.contact.remark | placeholder('-') }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="display-form">
                <div class="display-item">
                  <label>渠道单号：</label>
                  <div class="display-content">{{ props.row.channelOrderNumber ? props.row.channelOrderNumber : '-'}}</div>
                </div>
                <div class="display-item">
                  <label>预订时段：</label>
                  <div class="display-content">{{ props.row.bookForm.timeSlotLabel }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="submitOn" column-key="o.submit_on" sortable="custom" label="下单时间" width="175" />
      <el-table-column prop="orderNumber" label="订单号" width="120" />
      <el-table-column prop="itemName" label="产品" width="200" >
        <template slot-scope="scope">
          {{scope.row.itemName}} ({{scope.row.amount}})
        </template>
      </el-table-column>
      <el-table-column prop="dtbName" label="分销商"/>
      <el-table-column prop="useDate" column-key="o.use_date" sortable="custom" label="消费日期" align="center" width="135"/>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="['', '', 'primary', '', 'warning', 'danger', 'success'][scope.row.status]">
            {{orderStatusMapper[scope.row.status.toString()]}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="140">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="showOrder(scope.row.orderNumber)">详情</el-button>
          <el-button v-if="scope.row.status==2" type="warning" size="small" @click="autoDispatchItems(scope.row)">出票</el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- pagination -->
    <el-pagination @current-change="showPage" :current-page.sync="page.page" :page-size="page.pageSize" 
      :total="page.totalElements" layout="total, prev, pager, next, jumper" />
  </div>
</template>

<script>
import { Orders, Dtb } from '@/store/api'
import { OrderStatus } from '@/constants'
import Pagination from '@/utils/pagination'
export default {
  data() {
    return {
      loading: false,
      orderStatusMapper: OrderStatus,
      dtbs: [],
      page: {
        content: [],
        dtbId: []
      },
      query: {
        submitOnFrom: new Date(),
        pagesize: 20,
        status: ['2', '4', '5', '6']
      }
    }
  },
  created() {
    this.loadDtbs()
    this.loadPage(1)
  },
  methods: {
    ...Pagination,
    list(page, query) {
      this.loading = true
      return Orders.listOrders(query).then((data) => {
        this.page = data
        this.loading = false
      })
    },
    showOrder(orderNumber) {
      let route = this.$router.resolve('/order/show?orderNumber=' + orderNumber)
      window.open(route.href, '_blank')
    },
    autoDispatchItems(order) {
      Orders.autoDispatch(order.orderNumber)
        .then(() => {
          this.$message.success('自动处理凭证任务已发布')
          this.reloadPage()
        })
    },
    loadDtbs() {
      Dtb.list({pagesize: 20}).then((page) => {
        this.dtbs = page.content
      })
    },
    summaryTotalCost(table) {
      let {columns, data} = table
      const summary = []
      columns.forEach((column, index) => {
        if (index === 0) {
          summary[index] = '合计'
        } else if (column.property === 'status') {
          const sum = data.reduce((prev, curr) => {
            const value = Number(curr['total'])
            return isNaN(value) ? prev : prev + value
          }, 0)
          summary[index] = sum / 100
        } else {
          summary[index] = null
        }
      })
      return summary
    }
  }
}
</script>

<style lang="scss">
.el-table__expanded-cell {
  padding: 8px 50px;
}

.el-select,
.el-date-editor.el-input {
  width: 100%;
}

.order-expend .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  label {
    width: 80px;
    color: #8492A6;
    padding: 10px 0;
  }
  .el-form-item__content {
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      width: 160px;
    }
  }
}
</style>
